<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{margin: 0;padding: 0;}
			canvas{
				margin-top:25%;
				margin-left:50% ;
				box-shadow:0 0 15px salmon;
				transform: translateX(-50%) translateY(-50%);
			}
			#shwoTable{
				text-align: center;
				font-size: 25px;
				font-family: "微软雅黑";
			}
		</style>
	</head>
	<body>
		<canvas id="can5" width="400px" height="400px"></canvas>
		<div id="shwoTable"> </div>
		<script>
			let shwoTable = document.getElementById('shwoTable')
			hour=0;min=0;sec=0;
		setInterval(function(){
			var dat=new Date();
			hour=dat.getHours();

			min=dat.getMinutes();
			sec=dat.getSeconds();
			shwoTable.innerHTML = `${hour}:${min}:${sec}`
			hour=hour>12?hour-12+min/60:(hour+min/60);
			
			rr=rand(256);gg=rand(256);bb=rand(256);
			rrr=rand(256);ggg=rand(256);bbb=rand(256);
			r=rand(256);g=rand(256);b=rand(256);
			
			c5.save();c5.save();c5.save();
			c5.clearRect(0,0,400,400);
			outer();
			poi(-10,60,6,"rgb("+r+","+g+","+b+")",hour);
			c5.restore();
			po(-15,90,4,"rgb("+rr+","+gg+","+bb+")",min);
			c5.restore();
			po(-20,120,2,"rgb("+rrr+","+ggg+","+bbb+")",sec);
			c5.restore();
		},1000)
		var c5=document.getElementById("can5").getContext('2d');
		m=(Math.PI)/120;
		function rand(x){
			return(parseInt(x*Math.random()));
		}
		function shad(n){
			c5.shadowColor="#FA8072";
			c5.shadowOffsetX=n;
			c5.shadowOffsetY=n;
			c5.shadowBlur=n;
			c5.globalAlpha=0.8;
		}
		function circle(){
			c5.beginPath();
			c5.lineWidth="5";
			shad(4);
			c5.strokeStyle="#002";
			c5.arc(200,200,150,0,360,false);
			c5.stroke();
			
		}
		function biao(i,w,r){
			c5.beginPath();
			c5.lineWidth=w;
			shad(1);
			c5.arc(200,200,r,i/6*Math.PI-m,(i/6*Math.PI),false);
			c5.stroke();
		}
		function outer(){
			circle();
			for(i=0;i<12;i++)
			biao(i,18,134);
			for(j=0;j<12;j=j+1/5)
			biao(j,10,140);
			for(i=0;i<12;i++)
			biao(i,18,134);
		}
		
		function po(l,ll,wi,co,n){
			c5.translate(200,200);
			c5.rotate((n-15)/30*Math.PI);
			c5.beginPath();
			c5.moveTo(l,0);
			c5.lineTo(ll,0);
			if(wi==2){
				c5.fillStyle="#fff";
				c5.strokeStyle="#000";
				c5.arc(0,0,5,0,360,false);
			}
			c5.lineWidth=wi;
			c5.strokeStyle=co;
			c5.stroke();
			c5.fill();
		}	
		function poi(l,ll,wi,co,n){
			c5.translate(200,200);
			c5.rotate((n-3)/6*Math.PI);
			c5.beginPath();
			c5.moveTo(l,0);
			c5.lineTo(ll,0);
			c5.lineWidth=wi;
			c5.strokeStyle=co;
			c5.stroke();
			c5.fill();
		}

		
		</script>
	</body>
</html>
